import React ,{Component} from 'react';
import {Modal,Form,Input} from 'antd';
import styles from './UserModal.css';
const FormItem=Form.Item;
class UserEditModal extends Component{
  state={
    visible:false
  }
  showModal=(e)=>{
    if(e)e.stopPropagation();
    this.setState({
      visible:true
    })
  }
  hideModel=()=>{
    this.setState({
      visible:false
    })
  }
  okHandler=()=>{
    const {onOk}=this.props;
    this.props.form.validateFields((err,values)=>{
      if(!err){
        onOk(values);
        this.hideModel();
      }
    })
  }

   render(){
      const {children}=this.props;
      const {name,email,website}=this.props.record;
      const {getFieldDecorator}=this.props.form;
      const formItemLayout={
        labelCol:{span:6},
        wrapperCol:{span:14}
      }
      return(
      <span>
          <span onClick={this.showModal}>
            {children}
          </span>
          <Modal title='Edit User' visible={this.state.visible} onOk={this.okHandler} onCancel={this.hideModel}>
              <Form layout='horizontal' onSubmit={this.okHandler}>
                  <FormItem label="Name" {...formItemLayout}>
                      {
                        getFieldDecorator('name',{
                          initialValue:name
                        })(<Input/>)
                      }
                  </FormItem>
                  <FormItem label="Email" {...formItemLayout}>
                      {
                        getFieldDecorator('email',{
                          initialValue:email
                        })(<Input/>)
                      }
                  </FormItem>
                  <FormItem label="Website" {...formItemLayout}>
                      {
                          getFieldDecorator('website', {
                            initialValue: website,
                          })(<Input />)
                        }
                  </FormItem>
              </Form>
          </Modal>
      </span>
    )
   }
}

export default Form.create()(UserEditModal);